<template>
  <div>
    <!-- 在表格中绑定数据 -->
    <el-table v-bind:data="users">
      <el-table-column
        prop="id"
        label="学号"
        width="100px"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="date"
        label="日期"
        width="300px"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="400px"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        width="500px"
        align="center"
      ></el-table-column>

      <el-table-column prop="" label="操作" width="300px" align="center">
        <!-- scope里面那个记录了当前行的下标、当前行的数据 -->
        <template slot-scope="scope">
          <!-- 触发查看对话框 -->
          <el-button type="success" size="mini" @click="info(scope)"
            >查看</el-button
          >
          <!-- 触发编辑对话框 -->
          <el-button type="primary" size="mini" @click="update(scope)"
            >更新</el-button
          >
          <el-button type="danger" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 查看信息的对话框 -->

    <el-dialog
      title="详情"
      :visible.sync="dialogVisible"
      width="30%"
      v-if="refresh"
    >
      <!-- 显示数据 ： 当前行的数据 @close触发关闭事件-->
      <Detail v-bind:user="currentuser" @close="close"></Detail>
    </el-dialog>
    <!-- 编辑的对话框 -->
    <el-dialog
      title="详情"
      :visible.sync="dialogVisible2"
      width="30%"
      v-if="refresh"
    >
      <div>
        <!-- 在对话框中显示当前行的数据    
        结束数据的方法不要写小括号 （不然接收的数据没有参数）
    -->
        <Edit :user="currentuser" @change="change"></Edit>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// 导入组件
import Detail from "./detail.vue";
import Edit from "./edit.vue";
export default {
  // 接收父组件传递的数据
  props: {
    users: Array,
  },
  // 注册组件
  components: {
    Detail,
    Edit,
  },
  methods: {
    info: function (scope) {
      console.log(scope);
      //将选中的行的值设置为当前用户
      //row是当前行的数据
      this.currentuser = scope.row;
      //创建对话框
      this.refresh = true;
      //显示对话框
      this.dialogVisible = true;
    },
    close: function () {
      // 关闭对话框
      this.dialogVisible = false;
      //销毁对话框
      this.refresh = false;
    },
    update: function (scope) {
      //记录修改数据的下标  用于修改时删除下标
      this.index = scope.$index;
      //将选中的行的值设置为当前用户
      this.currentuser = scope.row;
      //创建对话框
      this.refresh = true;
      //显示对话框
      this.dialogVisible2 = true;
    },
    change: function (temp) {
      console.log(temp);
      //发送请求修改后台数据：修改成功才修改前台
      //axios请求默认采用JSON格式字符串提交，所以在后台对应接口如果要转换成对象需要在参数上
      //加@RequestBody
      // then回调函数 ，作用和jquery中的success一样，res中封装了得到的数据
      this.axios.post("http://localhost:8080/user/update", temp).then((res) => {
        console.log(res);
      });

      //因为修改数组中的数据，直接这样修改是无法被vue识别到，就不会重新
      //this.currentuser = temp;
      //通过$set给数组指定下标赋值   $set会触发重写渲染数据
      this.$set(this.users, this.index, temp);
      //关闭对话框
      this.dialogVisible2 = false;
      //销毁对话框  防止数据未刷新
      this.refresh = false;
    },
  },

  data() {
    return {
      dialogVisible: false,
      //记录当前选中的行
      currentuser: null,
      //对话框显示 默认为false
      dialogVisible2: false,
      index: null,
      //刷新
      refresh: false,
    };
  },
};
</script>
<style scoped>
</style>